<template>
	<view class="container">
		<!-- 提现方式 -->
		<view class="section">
			<div class="section-box">
				<view class="section-title">提现方式</view>
				<view class="section-content">
					<div class="section-text">{{ selectedOptionObj[selectedOption] }}</div>
					<div style="font-size: 12px; color: #b0b0b0">{{selectedOption === 'personal' ? "每日可提现一次，日限额1万，单笔最少1元" : "每日可提现一次，单笔最少1元"}}</div>
				</view>
			</div>
			<div class="line"></div>
			<view class="section-tip" @click="toggle('bottom')">
				{{selectedOption === 'personal' ? "如需提升提现额度，可变更提现方式" : "如需提现到个人账户，可变更提现方式"}}
				
				<uni-icons type="right" size="16"></uni-icons>
			</view>
		</view>

		<!-- 输入提现金额 -->
		<view class="section">
			<view class="section-title">
				提现至
				<view class="section-title-wx">
					<div v-if="selectedOption === 'personal'">
						<image src="/static/mine/Group_597.png" alt="" style="width: 40rpx; height: 40rpx; margin-right: 5px; vertical-align: bottom" />
						微信零钱
						<uni-icons type="right" size="16" style="margin-left: 5px; vertical-align: middle"></uni-icons>
					</div>
					<div v-else>
						<view v-if="!listData.isHaveAccount" @click="toggle('top', 'add')">
							<image src="/static/mine/yinhang.png" mode="aspectFit" style="width: 40rpx; height: 40rpx; margin-right: 5px; vertical-align: bottom" />
							{{statusType == 'add' ? '添加' : '修改'}}银行账户
							<uni-icons type="right" size="16" style="margin-left: 5px; vertical-align: middle"></uni-icons>
						</view>
						<view v-else @click="toggle('top', 'edit')">
							<image src="/static/mine/yinhang.png" mode="aspectFit" style="width: 40rpx; height: 40rpx; margin-right: 5px; vertical-align: bottom" />
							{{listData.bankName}}({{listData.bankAccount}})
							<uni-icons type="right" size="16" style="margin-left: 5px; vertical-align: middle"></uni-icons>
						</view>
						
					</div>
				</view>
			</view>

			<view class="input-container">
				<view class="currency-symbol">¥</view>
				<input class="input" type="number" placeholder="请输入提现金额" maxlength="8" v-model="amount" />
			</view>
			<div class="line2"></div>
			<view class="tip">
				可提现额度{{listData.price || 0}} 元
				<text class="link" @click="handleWithdrawAll">全部提现</text>
			</view>
		</view>

		<!-- 提现按钮 -->
		<view class="fixed-bottom">
			<button class="withdraw-btn" @click="handleWithdraw">提现</button>
		</view>

		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popupCenter" background-color="#fff" border-radius="10px 10px 10px 10px" @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<div class="box">
						<text class="text">完善实名信息</text>
						<div class="body">
							根据相关政策法规要求，您需完善实名信息用于所得收益报税。您提交实名信息时，需上传该实名有效身份证照片拐交审核，审核通过后将由平台合作的第三方为您提供提现服务。
						</div>
						<div class="line3"></div>
						<div class="footer" @click="submitInfo">提交实名信息</div>
					</div>
				</view>
			</uni-popup>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popupBottom" background-color="#fff" @change="change">
				<view class="popup-content2">
					<!-- 弹出框标题 -->
					<view class="popup-header">
						<uni-icons custom-prefix="custom-icon" type="closeempty" size="20" style="color: rgba(176, 176, 176, 1)"></uni-icons>
						<text class="popup-title">更换结算方式</text>
						<button class="next-button" @click="handleNextStep">下一步</button>
					</view>
					<div class="line4"></div>

					<view class="options">
						<!-- 动态生成选项 -->
						<view class="option-item" v-for="(option, index) in options" :key="index" @click="selectOption(option.value)">
							<!-- 选项内容 -->
							<view class="option-content">
								<text class="option-title">{{ option.title }}</text>
								<text class="option-description">{{ option.description }}</text>
							</view>

							<!-- 单选框 -->
							<view class="radio-container">
								<label class="radio">
									<radio :value="option.value" :checked="selectedOption === option.value" color="#10BEAF" />
								</label>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>

		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popupBottom2" background-color="#fff" @change="change">
				<view class="popup-content2">
					<!-- 弹出框标题 -->
					<div class="popup-content2Box">
						<view class="popup-header2">
							<uni-icons custom-prefix="custom-icon" type="closeempty" size="20" style="color: rgba(176, 176, 176, 1)" @click="closePopupBottom2"></uni-icons>
							<div class="popup-header-title">
								<text class="popup-title2">填写对公账户信息</text>
								<text class="popup-title3">仅支持绑定公司的对公银行卡</text>
							</div>
						</view>
					</div>

					<div class="line4"></div>
					<view class="options">
						<uni-forms ref="form" :model="formData" :rules="rules" label-width="100">
							<uni-forms-item label="开户主体" name="subjectName" required>
								<uni-easyinput v-model="formData.subjectName" placeholder="请输入开户主体名称" />
								<!-- <uni-icons type="right" size="16" style="color: #b0b0b0"></uni-icons> -->
							</uni-forms-item>

							<uni-forms-item label="开户银行" name="bankName" required>
								<!-- <uni-easyinput v-model="formData.bank" :localdata="banks" placeholder="请选择开户银行" readonly /> -->
								<picker class="picker" mode="selector" :value="formData.bankName" :range="bankList" @change="onBankChange">
									<view class="pickerInput" v-if="!formData.bankName">{{ formData.bankName || '请选择开户银行' }}</view>
									<view class="pickerInput" style="color: black" v-else>{{ formData.bankName }}</view>
									
								</picker>
								<uni-icons type="right" size="16" style="color: #b0b0b0"></uni-icons>
							</uni-forms-item>
							<uni-forms-item label="开户支行" name="branchName" required>
								<uni-easyinput v-model="formData.branchName" placeholder="请输入开户支行" />
								<!-- <uni-icons type="right" size="16" style="color: #b0b0b0"></uni-icons> -->
							</uni-forms-item>

							<uni-forms-item label="对公账号" name="bankAccount" required>
								<uni-easyinput v-model="formData.bankAccount" placeholder="请输入对公账号" maxlength="18" />
								<!-- <uni-icons type="right" size="16" style="color: #b0b0b0"></uni-icons> -->
							</uni-forms-item>
						</uni-forms>
					</view>
				</view>
				<view class="fixed-bottom">
					<button class="withdraw-btn" @click="submitForm">确认</button>
				</view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			amount: '', // 提现金额
			price: 0, // 可提现额度
			type: 'center',
			taxRate: 0,
			selectedOption: 'personal', // 当前选中的结算方式
			options: [
				{
					value: 'personal',
					title: '个人提现',
					description: '公司和个人交税，需结合收入与成本等计算税金'
				},
				{
					value: 'company',
					title: '对公提现',
					description: '公司和个人交税，需结合收入与成本等计算税金'
				}
			],
			selectedOptionObj: {
				personal: '个人提现',
				company: '对公提现'
			},
			formData: {
				subjectName: '',
				bankName: '',
				bankAccount: '',
				branchName: '',
			},
			rules: {
				subjectName: {
					rules: [
						{
							required: true,
							errorMessage: '请输入开户主体名称'
						}
					]
				},
				bankName: {
					rules: [
						{
							required: true,
							errorMessage: '请选择开户银行'
						}
					]
				},
				branchName: {
					rules: [
						{
							required: true,
							errorMessage: '请选择开户支行'
						}
					]
				},
				bankAccount: {
					rules: [
						{
							required: true,
							errorMessage: '请输入对公账号',
						},
						// {
						// 	errorMessage: '请输入有效账号',
						// 	pattern: '^\\d{18}$'
						// }
					]
				}
			},
			bankList: [],
			statusType: 'add',
			listData: {},
		};
	},
	onLoad() {
	  	this.getListData()
		this.$post('/merchant/system/dict/detail', { dictCode: "bank" }).then((res) => {
			if (res.success) {
				this.bankList = res.content?.map((item) => {
					return item.value
				})
			}
		})
	},
	methods: {
		getListData() {
			uni.showLoading({
				title: '加载中'
			})
			const type = this.selectedOption === 'personal' ? 1 : 2;
			this.$post('/yahe/account/getMyWithdrawal', { type }, '1').then((res) => {
				if (res.success) {
					this.listData = res?.content || {}
				} else {
					this.$toast(res.message, 'none')
				}
			})
		},
		submitInfo() {
			this.$refs.popupCenter.close();
			uni.navigateTo({
				url: '/mineComponentPackage/component/identity/index'
			});
		},
		// 全部提现
		handleWithdrawAll() {
			this.amount = this.listData.price;
		},
		toggle(type, statusType) {
			this.type = type;
			this.statusType = statusType;
			if (statusType == 'edit') {
				this.$post(`/yahe/account/selectAccountInfo/${this.listData.corporateAccountId}`, {} ,'1').then((res) => {
					if (res.success) {
						this.formData = res.content;
						if (type == 'center') {
							this.$refs.popupCenter.open(type);
						} else if (type == 'bottom') {
							this.$refs.popupBottom.open(type);
						} else {
							this.$refs.popupBottom2.open('bottom');
						}
					}
				})
			} else {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				if (type == 'center') {
					this.$refs.popupCenter.open(type);
				} else if (type == 'bottom') {
					this.$refs.popupBottom.open(type);
				} else {
					this.$refs.popupBottom2.open('bottom');
				}
			}
			
			
		},
		change(e) {
			console.log('当前模式：' + e.type + ',状态：' + e.show);
		},

		// 提现操作
		handleWithdraw() {
			if (!this.amount) {
				uni.showToast({
					title: '请输入提现金额',
					icon: 'none'
				});
				return;
			}
			if (this.selectedOption === 'company') {
				if (!this.listData.bankAccount){
					uni.showToast({
						title: '请输入对公账号',
						icon: 'none'
					});
					return;
				}
			}
			this.$post('/yahe/checkIsCertification').then((res) => {
				if (res.success) {
				   // 去提现
				   if (this.selectedOption === 'personal') {
					   this.personalWithdraw()
				   } else {
					   this.companyWithdraw()
				   }
				} 
				else {
					this.toggle('center');
				}
			})
		},
		
		// 个人提现
		async personalWithdraw() {
			const param = {
				openId: await this.getOpenId(),
				type: 1,
				withdrawalPrice: Number(this.amount),
			}
			this.$post('/yahe/account/commitWithdrawal', param, '1').then((res) => {
				if (res.success) {
					this.$toast('提交成功！', 'none')
					uni.navigateTo({
						url: `/mineComponentPackage/component/schedule/index?withdrawalId=${res.content?.withdrawalId}`
					})
				} else {
					this.$toast(res.message, 'none')
				}
				
			})
			
		},
		
		// 对公提现
		companyWithdraw() {
			// uni.navigateTo({
			// 	url: `/mineComponentPackage/component/invoice/index?withdrawalId=1892389160136908802`
			// })
			// return
			const param = {
				corporateAccountId: this.listData.corporateAccountId,
				type: 2,
				withdrawalPrice: Number(this.amount),
			}
			this.$post('/yahe/account/commitWithdrawal', param, '1').then((res) => {
				if (res.success) {
					this.$toast('提交成功！', 'none')
					// 提交发票
					uni.navigateTo({
						url: `/mineComponentPackage/component/invoice/index?withdrawalId=${res.content?.withdrawalId}`
					})
				} else {
					this.$toast(res.message, 'none')
				}
			})
		},

		// 选择结算方式
		selectOption(option) {
			this.selectedOption = option;
			uni.showToast({
				title: `已选择：${option === 'personal' ? '个人提现' : '对公提现'}`,
				icon: 'none'
			});
		},
		// 处理下一步
		handleNextStep() {
			if (!this.selectedOption) {
				uni.showToast({
					title: '请先选择结算方式',
					icon: 'none'
				});
				return;
			}
			this.getListData()
			this.$refs.popupBottom.close(); // 关闭弹出框
			
		},
		openBankPicker() {
			// picker 组件已经绑定了点击事件，无需额外处理
		},
		onBankChange(e) {
			this.formData.bankName = this.bankList[e.detail.value];
		},
		submitForm() {
			this.$refs.form
				.validate()
				.then((res) => {
					const param = {
						...this.formData,
					}
					if (this.statusType == 'edit') {
						param.corporateAccountId = this.listData.corporateAccountId
					}
					this.$post('/yahe/account/createAccountInfo', param, '1').then((res) => {
						if (res.success) {
							this.getListData()
							uni.showToast({
								title: '提交成功',
								icon: 'success'
							});
							this.closePopupBottom2()
						} else {
							this.$toast(res.message, 'none')
						}
					})
				})
				.catch((err) => {
					console.log('表单验证失败:', err);
				});
		},
		closePopupBottom2() {
			this.$refs.popupBottom2.close();
			this.formData = {
				subjectName: '',
				bankName: '',
				bankAccount:'',
				branchName: '',
			};
		},
		getOpenId() {
			return new Promise((resolve) => {
				if (uni.getStorageSync('openID')) {
					resolve(uni.getStorageSync('openID'));
				} else {
					// #ifdef H5
					resolve(uni.getStorageSync('openID'));
					// #endif
					// #ifdef MP-WEIXIN
					uni.login({
						scopes: 'auth_base',
						onlyAuthorize: false,
						success: (res) => {
							this.$post('/yahe/login', {
								loginType: 'WECHAT',
								username: uni.getAccountInfoSync().miniProgram.appId,
								password: res.code
							}).then((res) => {
								if (res.code === '1') {
									uni.setStorageSync('openID', res.content.openId);
									resolve(res.content.openId);
								}
							});
						}
					});
					// #endif
					// #ifdef MP-TOUTIAO
					uni.login({
						scopes: 'auth_base',
						onlyAuthorize: false,
						success: (res) => {
							this.$post('/yahe/login', {
								loginType: 'DOUYIN',
								username: this.$mpAppid,
								password: res.code
							}).then((res) => {
								if (res.code === '1') {
									uni.setStorageSync('openID', res.content.openId);
									resolve(res.content.openId);
								}
							});
						}
					});
					// #endif
				}
			});
		},
	}
};
</script>
<style scoped>
.container {
	padding: 30rpx;
	background-color: #f5f5f5;
	height: 100%;
}

.section {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 40rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}
.pickerInput {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	margin-bottom: 0rpx;
	text-align: end;
	font-size: 24rpx;
	height: 80rpx;
	margin-right: 40rpx;
	color: #b0b0b0;
	line-height: 80rpx;
	font-weight: 400;
}
.section-box {
	display: flex;
	justify-content: space-between;
	align-items: end;
}
.picker {
	width: 100%;
}

.section-title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 32rpx;
	margin-bottom: 20rpx;

	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	color: #3a3a3a;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.section-title-wx {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 26rpx;
	color: #3a3a3a;
	line-height: 30rpx;
	text-align: right;
	font-style: normal;
	text-transform: none;
}

.section-content {
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: flex-end;
	font-size: 28rpx;
	color: #666;
}

.section-text {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 26rpx;
	color: #3a3a3a;
	text-align: right;
	font-style: normal;
	text-transform: none;
}

.line {
	border-bottom: 1rpx solid #efefef;
	margin: 36rpx 0rpx;
}

.line2 {
	border-bottom: 2rpx solid #efefef;
	margin: 0rpx 0rpx 36rpx 0rpx;
}

.section-tip {
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #3a3a3a;
	line-height: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
}

.currency-symbol {
	/* position: absolute; */
	/* left: 20rpx; */
	font-size: 32rpx;
	color: #333;
	z-index: 1;
}

.input-container {
	/* position: relative; */
	display: flex;
	align-items: center;
}

.currency-symbol {
	/* position: absolute;
		left: 0rpx;
		top: 20rpx; */
	font-size: 50rpx;
	font-weight: 500;
	color: #333;
	z-index: 1;
}

.input {
	box-sizing: border-box;
	height: 80rpx;
	border-radius: 8rpx;
	padding: 0 20rpx 0 20rpx;
	/* margin-bottom: 20rpx; */
	border: 0rpx;
	font-size: 40rpx;
	font-weight: 400;
	color: #3a3a3a !important;
}

.tip {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #b0b0b0;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.link {
	margin-left: 20rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #10beaf;
	line-height: 28rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.withdraw-btn {
	background: linear-gradient(90deg, #29d8c6 0%, #10beaf 100%);
	border-radius: 88rpx 88rpx 88rpx 88rpx;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	color: #ffffff;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.fixed-bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 40rpx;
	padding: 20rpx 40rpx;
}

::v-deep .uni-easyinput__placeholder-class {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #b0b0b0;
	font-style: normal;
	text-transform: none;
}

::v-deep.uni-popup .uni-popup__wrapper {
	/* width: 560rpx; */
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	background-color: rgb(255, 255, 255);
}

.box {
	display: flex;
	flex-direction: column;
	margin: 40rpx 48rpx 0rpx;
	justify-content: center;
	align-items: center;
}

.text {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 36rpx;
	color: #3a3a3a;
	line-height: 42rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.body {
	margin: 24rpx 0px 40rpx 0px;
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 26rpx;
	color: #6d6d6d;
	line-height: 40rpx;
	font-style: normal;
	text-transform: none;
}

.line3 {
	border-bottom: 1px solid #d1d1d1;
	opacity: 0.5;
	width: 120%;
}

.line4 {
	border-bottom: 1px solid #d1d1d1;
	opacity: 0.5;
	width: 100%;
	margin-bottom: 50rpx;
}

.footer {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 30rpx;
	color: #0a978e;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin: 24rpx 0rpx;
}

/* 弹出框内容样式 */

.popup-content {
	width: 560rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	background-color: #fff;
}

.popup-content2 {
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	background-color: #fff;
	padding: 40rpx;
	margin-bottom: 386rpx;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	margin-bottom: 40rpx;
}

.popup-title {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 30rpx;
	color: #3a3a3a;
	line-height: 35rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

/* 选项列表样式 */
.options {
	margin-bottom: 40rpx;
}

.option-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 0;
}

.option-item:last-child {
	border-bottom: none;
}

.option-title {
	font-size: 32rpx;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.option-description {
	font-size: 24rpx;
	color: #999;
	display: block;
}

/* 下一步按钮样式 */
.next-button {
	height: 60rpx;
	background: linear-gradient(90deg, #29d8c6 0%, #10beaf 100%);
	border-radius: 8rpx 8rpx 8rpx 8rpx;

	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #ffffff;
	/* line-height: 28rpx; */
	text-align: center;
	font-style: normal;
	text-transform: none;
}

::v-deep .uni-radio-input-checked {
	border-color: rgba(41, 216, 198, 1) !important;
	background: linear-gradient(90deg, #29d8c6 0%, #10beaf 100%);
}

.popup-header2 {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	margin-bottom: 28rpx;
}

.popup-title2 {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #3a3a3a;
	line-height: 33rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.popup-title3 {
	font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #b0b0b0;
	line-height: 28rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
	margin-top: 4rpx;
}

.popup-header-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
}

::v-deep .is-input-border {
	border: 0rpx solid;
}

::v-deep .uni-easyinput__content-input {
	padding-right: 30rpx;
	text-align: right;
}

::v-deep .uni-forms-item__content {
	display: flex;
	align-items: center;
}

::v-deep .uni-input-input {
	font-size: 18px;
	font-weight: 600;
}
</style>
